<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>新增安全检查表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="../../../layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="../../../css/public.css" media="all"/>
  <link rel="stylesheet" href="../../common/zTreeStyle.css"/>
  <link rel="stylesheet" href="check-add.css"/>
</head>
<body class="childrenBody" style="background: white;">
<div class="topsty">
  <div style="display: inline;"><span style="font-size: 15px;"><i class="layui-icon"
                                                                  style="color: #1E9FFF;margin:0 10px 0 30px;">&#xe65b;</i><span
      id="pageTitle"></span></span></div>
  <div class="backtit" style="top: -5px;">
    <div class="back_san"></div>
    <a onclick="history.go(-1)" class="layui-btn layui-btn-normal">返回列表页</a>
  </div>
  <div class="backtit" style="top: -5px;">
    <a class="layui-btn layui-btn-normal export_btn" onclick="$('.model').show()">添加风险描述</a>
  </div>
</div>
<form class="layui-form">
  <table class="layui-table " lay-skin="nob" style="background: white;">
    <colgroup>
      <col width="10%">
      <col width="23%">
      <col width="10%">
      <col width="23%">
      <col width="10%">
      <col width="23%">
    </colgroup>
    <tbody>
    <tr>
      <td>
        <div class="layui-input-inline ftdl"><label class="fowei">单元</label></div>
      </td>
      <td>
        <input type="text" class="layui-input" id="checkName" placeholder="输入单元名称"/>
      </td>
      <td>
        <label class="fowei ftdl">清单名称</label>
      </td>
      <td style="padding-right: 0px;">
        <input type="text" class="layui-input" id="" placeholder="输入清单名称"/>
      </td>
      <td>
        <label class="fowei ftdl">制修订时间</label>
      </td>
      <td>
        <input type="text" class="layui-input searchVal" readonly="" id="enddate" placeholder="选择时间">
      </td>
    </tr>
    <tr>
      <td>
        <label class="fowei ftdl">编号</label>
      </td>
      <td>
        <input type="text" class="layui-input" id="" placeholder="输入编号"/>
      </td>
      <td>
        <label class="fowei ftdl">单位选择</label>
      </td>
      <td style="padding-right: 0px;">
        <input type="text" id="applyUnit" readonly="" placeholder="请选择单位" onclick="showUnitTree()" autocomplete="off"
               class="layui-input" lay-verify="required">
        <ul id="applyUnitTree" class="ztree"
            style="height: 300px;overflow: auto; display: none;position: absolute;width: 239px;z-index: 999;background:white;">
        </ul>
      </td>
      <td>
      </td>
      <td>
      </td>
    </tr>
    </tbody>
  </table>
  <table class="layui-table table-list" lay-skin="nob" style="background: white;">
    <colgroup>
      <col width="15%">
      <col width="33%">
      <col width="15%">
      <col>
      <col width="4%">
    </colgroup>
    <tbody id="addTable">
    <template v-for="(items,indexs) in list">
      <tr id="item-0">
        <td class="layui-bg-green1">
          <div class="layui-input-inline ftdl"><label class="item-nav">{{items.title}}</label></div>
        </td>
        <td colspan="3" class="layui-bg-green1"></td>
        <td class="delIcon" @click="delBox(indexs)"></td>
      </tr>
      <tr id="item-title-0">
        <td>
          <div class="layui-input-inline ftdl"><label class="fowei">可能性分析</label></div>
        </td>
        <td style="padding-right: 0px;"><input type="text" class="layui-input layui-input1" id="item-name-0" value=""
                                               placeholder="输入检查项目名称"
                                               onchange="setItemValue('item-name-0', 0, 'name', null, null)">
          <select>
            <option>0.1</option>
            <option>0.2</option>
            <option>0.5</option>
            <option>1</option>
            <option>3</option>
            <option>6</option>
            <option>10</option>
          </select>
        </td>
        <td><label class="fowei ftdl">频次分析</label></td>
        <td><input type="text" class="layui-input layui-input1" id="item-unit-0" value="" placeholder="输入频次分析"
                   onchange="setItemValue('item-unit-0', 0, 'unit', null, null)">
          <select>
            <option>0.5</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>6</option>
            <option>10</option>
          </select>

        </td>
        <td :rowspan="items.green_box.length + 2" style="vertical-align: middle; padding:0px 9px;"
            id="item-title-0-rightBtn">
          <div class="rctd" @click="addBox(indexs)">
            <div class="box">
              <div class="rctd-add"></div>
              <p>增</p>
              <p>加</p>
              <p>检</p>
              <p>查</p>
              <p>项</p>
              <p>目</p></div>
          </div>
        </td>
      </tr>
      <tr id="item-title-0">
        <td>
          <div class="layui-input-inline ftdl"><label class="fowei">后果分析</label></div>
        </td>
        <td style="padding-right: 0px;">
          <select class="result_select">
          <option>10人以上死亡</option>
          <option>3～9人死亡</option>
          <option>1～2人死亡</option>
          <option>严重</option>
          <option>重大，伤残</option>
          <option>引人注意</option>
        </select>
          <select>
            <option>1</option>
            <option>3</option>
            <option>7</option>
            <option>15</option>
            <option>40</option>
            <option>100</option>
          </select>
        </td>
        <td><label class="fowei ftdl">风险评估值
          <div>D=L×E×C</div>
        </label></td>
        <td><span class="pg_value">90</span></td>
      </tr>
      <tr class="green-box" id="item-content-0-0" v-for="(item,index) in items.green_box">
        <td colspan="2" style="padding-right: 0px;padding-left: 8%;">
          <div class="layui-col-md12 ctd ctd1 sectd">
            <div class="layui-col-md12 ctdd">
              <div class="layui-col-md2 ctdlb"><label>风险分类</label></div>
              <select>
                <option>人的不安全行为</option>
                <option>物的不稳定因素</option>
                <option>管理缺陷</option>
                <option>环境因素</option>
              </select>
              <div class="layui-unselect layui-form-select">
                <div class="layui-select-title"><input type="text" placeholder="请选择" value="人的不安全行为" readonly=""
                                                       class="layui-input layui-unselect"><i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit">
                  <dd lay-value="人的不安全行为" class="layui-this">人的不安全行为</dd>
                  <dd lay-value="物的不稳定因素" class="">物的不稳定因素</dd>
                  <dd lay-value="管理缺陷" class="">管理缺陷</dd>
                  <dd lay-value="环境因素" class="">环境因素</dd>
                </dl>
              </div>
            </div>
            <div class="layui-col-md12 ctdd">
              <div class="layui-col-md2 ctdlb"><label>措施分类</label></div>
              <select>
                <option>安全管理措施</option>
                <option>安全技术措施</option>
              </select>
              <div class="layui-unselect layui-form-select">
                <div class="layui-select-title"><input type="text" placeholder="请选择" value="安全管理措施" readonly=""
                                                       class="layui-input layui-unselect"><i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit">
                  <dd lay-value="安全管理措施" class="layui-this">安全管理措施</dd>
                  <dd lay-value="安全技术措施" class="">安全技术措施</dd>
                </dl>
              </div>
            </div>
            <div class="layui-col-md12">
              <div class="layui-col-md2 ctdlb"><label>责任单位</label></div>
              <select>
                <option>厂</option>
                <option>处理站</option>
                <option>班组</option>
              </select>
              <div class="layui-unselect layui-form-select">
                <div class="layui-select-title"><input type="text" placeholder="请选择" value="厂" readonly=""
                                                       class="layui-input layui-unselect"><i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit">
                  <dd lay-value="厂" class="layui-this">厂</dd>
                  <dd lay-value="处理站" class="">处理站</dd>
                  <dd lay-value="班组" class="">班组</dd>
                </dl>
              </div>
            </div>
          </div>
        </td>
        <td colspan="2" style="padding-left: 0px;padding-right: 0px;">
          <div class="layui-col-md11 ctd ctd2">
            <div class="layui-col-md11 ctdd">
              <div class="layui-col-md2 ctdlb"><label>风险分析</label></div>
              <input type="text" class="layui-input layui-input1" placeholder="输入风险分析"></div>
            <div class="layui-col-md11 ctdd">
              <div class="layui-col-md2 ctdlb"><label>具体措施</label></div>
              <input type="text" class="layui-input layui-input1" placeholder="输入所需采取的措施"></div>
            <div class="layui-col-md11">
              <div class="layui-col-md2 ctdlb"><label>责任人</label></div>
              <input type="text" class="layui-input layui-input1" placeholder="输入责任人"></div>
            <div class="layui-col-md1" style="position: absolute;right: 5px;">
              <div class="ctdd ctddel" style="margin-bottom: 129px; height: 2px;">
                <i class="cti cti-del" @click="delItem(indexs,index)"></i></div>
              <div class="ctdadd" style="height: 2px;">
                <i class="cti cti-add" @click="addItem(indexs,index)" style="margin-top: -16px;"></i></div>
            </div>
          </div>
        </td>
      </tr>
    </template>

    <tr>
      <td colspan="5" style="text-align: center;">
        <button type="button" style="width: 100px;font-size: 16px;margin-top: 20px;" class="layui-btn layui-btn-danger"
                onclick="addSecurityCheck()">提&nbsp;交
        </button>
      </td>
    </tr>
    </tbody>
  </table>
</form>
<div class="model">
  <div class="title">
    选择需要添加的风险描述
    <i class="layui-icon layui-unselect layui-tab-close" onclick='$(".model").hide()'>ဆ</i>
  </div>
  <div class="content">
    <ul>
      <li class="active">物体打击</li>
      <li>车辆伤害</li>
      <li>机械伤害</li>
      <li>起重伤害</li>
      <li>触电</li>
      <li>海溺</li>
      <li>灼烫</li>
      <li>火灾</li>
      <li>高处坠落</li>
      <li>坍塌</li>
      <li>冒顶骗帮</li>
      <li>透水</li>
      <li>放炮</li>
      <li>火药爆炸</li>
      <li>瓦斯爆炸</li>
      <li>锅炉爆炸</li>
      <li>容器爆炸</li>
      <li>其他爆炸</li>
      <li>中毒窒息</li>
      <li>其他伤害</li>
      <li>污染</li>
    </ul>
  </div>
  <div class="button">
    <button class="layui-btn layui-btn-normal">确定</button>
  </div>
</div>
<script type="text/javascript" src="../../common/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="../../common/config.js"></script>
<script type="text/javascript" src="../../../layui/layui.js"></script>
<script type="text/javascript" src="../../common/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../common/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="check-add.js"></script>
<script>
  var app = new Vue({
    el: '.table-list',
    data: {
      list: [{title: "物体打击", green_box: ['']}],
    },
    methods: {
      addItem: function (indexs, index) {
        index ? this.list[indexs].green_box.splice(index + 1, 0, "") : this.list[indexs].green_box.push("");
      },
      delItem: function (indexs, index) {
        if (this.list[indexs].green_box.length == 1) {
          return
        }
        this.list[indexs].green_box.splice(index, 1)
      },
      addBox: function (indexs) {
        var title = this.list[indexs].title;
        this.list.splice(indexs + 1, 0, {title: title, green_box: ['']})
      },
      delBox: function (indexs) {
        if (this.list.length == 1) {
          return
        }
        this.list.splice(indexs, 1)
      }
    }
  })
  $("body").click(function () {
    $("#applyUnitTree").hide();
  })
  $('#applyUnit').click(function () {
    return false;
  });
  $('#applyUnitTree').click(function () {
    return false;
  });
</script>
</body>

</html>